<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box{
            width: 985px;
            height: 670px;
            box-shadow: 0 0 15px #000;
            margin: 50px auto;
        }
        #box li{
            width: 288px;
            height: 180px;
            border: 5px solid white;
            box-shadow: 0 0 5px #000;
            float: left;
            margin: 15px;
        }
        #box li.sca{
            animation: sca 0.5s linear;
        }
        #box li.move{
            animation: move 0.5s linear;
        }
        #box li.rot{
            animation: rot 0.5s linear;
        }
        @keyframes sca {
            0%{ transform: scale(1) }
            20%{ transform: scale(1.2) }
            40%{ transform: scale(0.8) }
            60%{ transform: scale(1.1) }
            80%{ transform: scale(0.9) }
            100%{ transform: scale(1) }

        }
        @keyframes move {
            0%{ transform: translateY(0) }
            20%{ transform: translateY(-20px) }
            40%{ transform: translateY(15px) }
            60%{ transform: translateY(-10px) }
            80%{ transform: translateY(5px) }
            100%{ transform: translateY(0) }
        }
        @keyframes rot {
            0%{ transform: rotate(0) }
            20%{ transform: rotate(-20deg) }
            40%{ transform: rotate(15deg) }
            60%{ transform: rotate(-10deg) }
            80%{ transform: rotate(5deg) }
            100%{ transform: rotate(0) }
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="images/s1.jpg" alt=""></li>
            <li><img src="images/s2.jpg" alt=""></li>
            <li><img src="images/s3.jpg" alt=""></li>
            <li><img src="images/s4.jpg" alt=""></li>
            <li><img src="images/s5.jpg" alt=""></li>
            <li><img src="images/s6.jpg" alt=""></li>
            <li><img src="images/s7.jpg" alt=""></li>
            <li><img src="images/s8.jpg" alt=""></li>
            <li><img src="images/s9.jpg" alt=""></li>

        </ul>
    </div>

    <script>
        var aLi = document.getElementsByTagName('li');
        var len = aLi.length;
        var arr = ['rot','sca','move'];
        for( var i=0;i<len;i++ ){
            aLi[i].onmouseenter = function () {
                var This = this;
                this.className = '';
                var r = Math.floor(Math.random()*3);
                setTimeout(function () {
                    This.className = arr[r];
                },13);
            }

        }

    </script>
</body>
</html>